<template>
  <div class="home" >
    <mt-swipe style="height:250px;">
      <mt-swipe-item>
        <img src="../assets/timg.jpg" alt="" srcset="" style="border: 0;width: 100%;height: 100%;">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/timg.jpg" alt="" srcset="" style="border: 0;width: 100%;height: 100%;">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="../assets/timg.jpg" alt="" srcset="" style="border: 0;width: 100%;height: 100%;">
      </mt-swipe-item>
    </mt-swipe>
      <div class="mui-input-row" style="margin: 5px 0px;">
        <div class="left" >
          <div style="border-bottom: 1px solid rgb(224, 224, 224);">
            <span class="mui-icon-extra mui-icon-extra-gold mui-active" style="color: #F78A8B;padding-right: 10px;"></span>
            <span style="color: #abaaaa;">已为用户赚</span>
            <span style="color: #F78A8B">125454金币</span>
          </div>
          <div>
            <span class="mui-icon mui-icon-person-filled" style="color: #F78A8B;padding-right: 10px;"></span>
            <span style="color: #abaaaa;">已注册人数</span>
            <span style="color: #F78A8B">125454人</span>
          </div>
        </div>
        <div class="right">
            <span style="color: #F78A8B;font-size: 36px;">96</span>
            <span style="color: #abaaaa;">%</span>
            <div  style="color: #abaaaa;">赚钱率</div>
        </div>
      </div>
      <div class="mui-input-row">
        <div class="imgleft">
          <router-link to="/ChangQi"><img src="../assets/changqi.png" alt="" style="width: 100%;height: 99%;padding: 5px;"></router-link>
        </div>
        <div class="imgright">
          <router-link to="/DuanQi"><img src="../assets/duanqi.jpg" alt="" style="width: 100%;height: 99%;padding: 5px;"></router-link>
        </div>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

	

export default {
  name: "Home",
  components: {
    // HelloWorld
  }
};
</script>
<style lang="less" scoped>
.left{
  width: 80%;
  // border: 1px solid red;
  box-sizing: border-box;
  float: left;
  height: 60px;
  padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
}
.right{
  width: 20%;
  // border: 1px solid red;
  box-sizing: border-box;
  float: left;
  height: 60px;
  padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 5px;
}

.imgleft{
  width: 50%;
  box-sizing: border-box;
  height: 320px;
  float: left;
}
.imgright{
  width: 50%;
  box-sizing: border-box;
  height: 320px;
  float: left;
}
</style>
